﻿
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.views.transposed.js"></script>

<div id="layout" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',border:false,split:true" style="width:350px;border-right-width:1px;">
        <table id="dg1"></table>
    </div>
    <div data-options="region:'center',border:false" style="padding:15px;border-left-width:1px;border-right-width:1px;">
        冷<br />
        漠<br />
        的<br />
        分<br />
        割<br />
        线
    </div>
    <div data-options="region:'east',border:false,split:true" style="width:600px;border-left-width:1px;">
        <table id="dg2"></table>
    </div>
</div>

<script>
    $(function () {

        var virData = [
            { ID: 1, CarBrand: "大众", SaleTotal: 111, SaleAmount: 1234.56 },
            { ID: 2, CarBrand: "马自达", SaleTotal: 222, SaleAmount: 4561.1 },
            { ID: 3, CarBrand: "宝马", SaleTotal: 333, SaleAmount: 362.4 },
            { ID: 4, CarBrand: "奔驰", SaleTotal: 444, SaleAmount: 1111.43 },
            { ID: 5, CarBrand: "讴歌", SaleTotal: 555, SaleAmount: 9811.32 },
            { ID: 6, CarBrand: "菲亚特", SaleTotal: 666, SaleAmount: 3156.77 }
        ];

        var options1 = {
            title: "关闭行列转置的数据列表（无扩展的正常效果）",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: [[
                { field: 'ID', title: '数据编号' },
                { field: 'Test', title: '测试冻结列' },
            ]],
            columns: [[
					{ field: 'CarBrand', title: '汽车品牌', width: 140 },
					{ field: 'SaleTotal', title: '销售数量', width: 140 },
                    { field: 'SaleAmount', title: '销售金额', width: 140 }
            ]],
            data: virData,
            rowColumnReverse: { enable: false }
        };

        $("#dg1").datagrid(options1);

        var options2 = $.extend({}, options1, {
            title: "开启行列转置的数据列表",
            rowColumnReverse: { enable: true, headerWidth: 110, itemWidth: 60 }
        });
        $("#dg2").datagrid(options2);

        top.window.$("#home-layout").layout("collapse", "west").layout("collapse", "east");
    });
</script>